<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payload工具箱 - uTools风格插件</title>
    <link rel="stylesheet" href="./static/css/all.min.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <div class="logo">
                <h1><i class="fas fa-shield-alt"></i> Payload </h1>
            </div>

            <div class="categories">
                <h2>分类</h2>
                <ul class="category-list" id="category-list">
                    <!-- 动态生成分类列表 -->
                </ul>
                <div class="category-manage">
                    <button class="manage-categories-btn" id="manage-categories">
                        <i class="fas fa-cog"></i> 管理分类
                    </button>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 搜索栏 -->
            <div class="search-bar">
                <div class="search-container">
                    <i class="fas fa-search"></i>
                    <input type="text" class="search-input" placeholder="输入关键词搜索（空格分隔多个关键词）..." id="search-input">
                </div>
                <button class="add-btn" id="add-payload">
                    <i class="fas fa-plus"></i> 添加
                </button>
            </div>

            <!-- Payload列表 -->
            <div class="payload-list" id="payload-list">
                <div class="loading">
                    <div class="loading-spinner"></div>
                    <p>正在加载Payload数据...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 提示信息 -->
    <div class="notification" id="notification">
        <i class="fas fa-check-circle"></i>
        <span id="notification-text">Payload已复制到剪贴板</span>
    </div>

    <!-- 添加/编辑Payload模态框 -->
    <div class="modal" id="payload-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">添加新Payload</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">名称</label>
                    <input type="text" class="form-input" id="payload-name" placeholder="输入Payload名称">
                </div>

                <div class="form-group">
                    <label class="form-label">分类</label>
                    <select class="form-input" id="payload-category">
                        <!-- 动态生成分类选项 -->
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label">Payload内容</label>
                    <textarea class="form-textarea" id="payload-content" placeholder="输入Payload内容"></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">标签（用逗号分隔）</label>
                    <input type="text" class="form-input tag-input" id="payload-tags" placeholder="输入标签，如：SQL注入,测试">
                    <div class="tag-preview" id="tag-preview"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="modal-cancel">取消</button>
                <button class="btn btn-primary" id="modal-save">保存</button>
            </div>
        </div>
    </div>

    <!-- 分类管理模态框 -->
    <div class="modal" id="category-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">管理分类</h3>
            </div>
            <div class="modal-body">
                <div class="category-list-container">
                    <ul class="editable-category-list" id="editable-category-list">
                        <!-- 动态生成可编辑分类列表 -->
                    </ul>
                </div>
                <div class="add-category-form">
                    <h4>添加新分类</h4>
                    <div class="form-group">
                        <input type="text" class="form-input" id="new-category-name" placeholder="输入分类名称">
                    </div>
                    <button class="btn btn-primary" id="add-category-btn">添加分类</button>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="category-modal-close">关闭</button>
            </div>
        </div>
    </div>

    <script src="preload.js"></script>
</body>
</html>